<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"
    />
    <title>发布观察者模式</title>
</head>

<body>
    <p>现在看看如何一步步实现发布 — 订阅模式。</p>
    <p> 首先要指定好谁充当发布者（比如售楼处）</p>
    <p> 然后给发布者添加一个缓存列表，用于存放回调函数以便通知订阅者（售楼处的花名册）</p>
    <p> 最后发布消息的时候，发布者会遍历这个缓存列表，依次触发里面存放的订阅者回调函 数（遍历花名册，挨个发短信）。</p>

    <div id="release">发布售楼信息</div>
    <script type="text/javascript">
        (function (window) {
            var salesOffices = {} // 售楼处
            salesOffices.clientList = []; // 花名册
            salesOffices.listen = function (fn) { // 新增订阅者
                this.clientList.push(fn)
            }
            salesOffices.trigger = function () {
                for (var i = 0; i < this.clientList.length; i++) {
                    var fn = this.clientList[i]
                    fn.apply(this, arguments)
                }
            }

            window.salesOffices = salesOffices
        })(window)

        salesOffices.listen(function (price, squareMeter) { // 小明订阅消息
            console.log('价格= ' + price + '，面积= ' + squareMeter);
        });
        salesOffices.listen(function (price, squareMeter) { // 小红订阅消息
            console.log('价格= ' + price + '，面积= ' + squareMeter);
        });


        // 发布信息
        salesOffices.trigger(2000000, 88);  // 发布一条
        salesOffices.trigger(1500000, 60);  // 发布一条

    </script>

</body>

</html>